<template>
  <view class="scrollbigbox">
    <!-- 左侧滑动部分 -->

    <scroll-view class="leftScroll" scroll-y="true" :style="{height:widheight+'px' }">
      <blockquote v-for="(item, index) in getfeilei" :key="index">
        <view @click="activechange(index,item)" :class="['left-scrollitem', index == cateData ? 'active' : '' ]">
          {{item.category_name}}
        </view>
      </blockquote>

    </scroll-view>
    <!-- 右侧的滑动效果 -->
    <scroll-view class="rightScroll" scroll-y="true" :style="{height:widheight+'px' }" :scroll-top="scrollTop">

      <!-- <view class="cataTwo-item " v-for="(itemtwo,indextwo) in righrData" :key="indextwo"> -->
        <!-- 二级分类的标题 -->
        <!-- <view class="cate-twolist">
          /{{itemtwo.body.title}}/
          </view> -->
      <!-- </view> -->

      <view class="istwo" @click="goodsdetai(itemthr)">
        <view class="twoicon" v-for="(itemfor,indexthr) in gettwodatbig" :key="indexthr">
          <view class="item-icon">
            <view class="auto-img">

              <image class="itemTwoimg" :src="itemfor.puzzle_url" mode=""></image>
            </view>
            <view class="textall">
              <view class="twodetone"> {{itemfor.name}}</view>
              <view class="twodettwo">¥{{itemfor.price}}起</view>
            </view>

          </view>
        </view>

        <view class="twolittle">
          <view class="allgoods">
            <view class="one-view"  v-for="(itemfif,indexfif) in gettwodatmal" :key="indexfif" >
              <image class="litima" :src="itemfif.img_url" mode=""></image>
              <text class="littex">{{itemfif.product_name}}</text>
            </view>
           
          </view>
        </view>

      </view>

      
      <!-- 二级分类下的三级分类三级分类的盒子 -->
      <view class="cata-three">
        <view class="cate-thr-item">

          <!-- <image :src="thrcat.body.product_list.puzzle_url" mode=""></image>     -->
          <text></text>
        </view>
      </view>


    </scroll-view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 高亮项
        cateData: 0,
        //当前设备所用高度
        widheight: 0,
        // //数据
        // navigation: [],
        // //二级分类的列表数组
        // cateDatetwo: [],
        // //三级分类
        // cateDatathr: [],
        //指向二级分类里面的一个数组

        //真正的头部数据
        getalltitle: [],
        getdetailtit: [],

        //右边的全部数据
        righrData: [],

        //二级的banner
        gettwobanner: [],
        //二级路由的数据
        gettwodat: [],
        //二级的小图数据耳机
        gettwodatmal: [],
        //二级的大图数据手机
        gettwodatbig: [],

        //三级分类的数据
        // getdetailthree: [],
        //商城主分类
        getfeilei: [],
        //主分类最新内容 新的商城数据 要传id
        // getNewswip: [],
        //商品分类 要id
        getshopc: [],
        //切换时滚动条的问题
        scrollTop:0
      };
    },
    onLoad() {
      //参看剩余高度信息 小程序方法
      const sysheigh = uni.getSystemInfoSync()
      // console.log(sysheigh)
      this.widheight = sysheigh.windowHeight

      this.getallSwipedata()

      this.getshopclassify()
    },
    methods: {
      //获取分类列表数据

      async getallSwipedata(index) {
        let self = this;
        uni.request({
          url: 'https://apis.netstart.cn/xmsc/home/category_v2',

          success: (res) => {
            if (res.result == "ok") return uni.$showthemes()
            uni.$showthemes('数据加载成功了喔~~~')

            console.log("商城主分类", res.data);

            let result = res.data.data;
            this.getfeilei = result

            // this.getfeilei.splice(0, 1)
            // console.log("商品主分类去除了推荐的内容==>", result)

            //一级路由的数据的标题
            // this.getdetailtit = result[0].title_list

            //三级路由的数据            
          }
        })
      },


      async getshopclassify(id) {
        if (!id) {
          id = -1;
        }
        console.log("试一试id==>", id)
        let self = this;
        uni.request({
          url: 'https://apis.netstart.cn/xmsc/home/category_v2?cat_id=' + id,

          success: (res) => {
            if (res.result == "ok") return uni.$showthemes()
            uni.$showthemes('数据加载成功了喔~~~')
            //右边的数据
            console.log("11sdsasaddsadsadsa11商品数据二级分类==>", res)

            //真正的头部标题数据
            let alltitle = res.data.data[0].title_list
            this.getalltitle = alltitle


            let result = res.data.data;
            //二级路由的数据
            let categorData = res.data.data[0].category_list.filter(item => {
              return item.view_type === "category_group";
            })

            //二级真正渲染的
            this.righrData = categorData

            this.gettwodat = categorData
            console.log("二级数据==>", this.gettwodat)

            // 标题 
            this
            //二级数据的再次筛选
            let newtwocata = this.gettwodat;
            let isarray = [];
            for (let i = 0; i < this.gettwodat.length; i++) {
              isarray.push({
                body_item: this.gettwodat[i].body.items,
                body_product_list: this.gettwodat[i].body.product_list
              })
            }
            console.log('isarray存放两个数据===>', isarray)
            this.gettwodatbig = isarray[0].body_product_list
            console.log("大图像的数据", this.gettwodatbig)
            //小图片的数据
            this.gettwodatmal = isarray[1].body_item
            console.log("小图像的数据", this.gettwodatmal)
          }
        })
      },


      activechange(index, item) {
        this.cateData = index
        //点击的时候重新为二级分类赋值` 选中的时候根据索引重新赋值给他
        // this.getdetailtit = this.getfeilei[index].title_list
        this.getdetailtit = this.getalltitle
        // console.log("item===>",item)
        // console.log("index==>",index)
        this.getshopclassify(item.category_id)
        //滚动条回到原位
        
       this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      //点击跳转页面
      goodsdetai(index,itemthree){
        uni.navigateTo({
          url:'/subpackaged/goods-listdet/goods-listdet?cid' 
        })
      }

    }
  }
</script>

<style lang="scss">
  .scrollbigbox {
    display: flex;

    .leftScroll {
      width: 120px;

      .left-scrollitem {
        background-color: #f7f7f7;
        line-height: 60px;
        text-align: center;
        font-size: 12px;

        &.active {
          background-color: #ffffff;
          position: relative;

          &::before {
            content: "";
            width: 3px;
            height: 30px;
            display: block;
            background-color: #c03403;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
          }
        }
      }
    }

    .rightScroll {
      .cataTwo-item {
        font-size: 12px;
        font-weight: bold;
        font-size: 20rpx;
        padding: 10px 0;

      }

      .istwo {
        

        .twoicon {

          .item-icon {
            background-color: #efefef;
            display: flex;
            align-items: center;
            margin: 30rpx 20rpx;
            border-radius: 10rpx;

            .itemTwoimg {
              width: 60px;
              height: 60px;
            }

            .twodetone {
              color: #4a4a4a;
              padding: 0 0 15rpx 15rpx;
            }

            .twodettwo {
              padding: 15rpx 0 0 15rpx;
            }
          }
        }

        .twolittle {
          padding: 40rpx 0rpx 0 15rpx;
          .allgoods {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .one-view {
              display: flex;
              flex-direction: column;
              width: 33.3%;
              align-items: center;
              padding: 10rpx 0 15rpx 0;
              .litima{ 
                width: 40px;
                height: 40px;
              }
              .littex{
                padding: 30rpx 6rpx;
                color: #959595;
                font-size: 10rpx
              }
            }
          }
        }
      }

    }



  }
</style>
